// 浏览器本地存储
// localStorage
// sessionStorage
// cookie
// 共同点: 都可以来做浏览器本地存储, 比如做token的管理(存取删)
// 区别:
// localStorage 永久存储, 除非主动删除
// sessionStorage 会话存储, 关闭网页自动删除
// localStorage 同域名的不同浏览器标签页可以共享
// sessionStorage 只能在当前浏览器标签页使用
// 不同源的本地存储不共享

// cookie区别:
// 它会自动在浏览器携带给后台, 而localStorage/sessionStorage需要你自己拼接

import Cookies from 'js-cookie'
// js-cookie 封装了set和get可以设置浏览器cookie存取

// 本地存储的都是字符串(即使是对象/数组也要转成JSON字符串存入)

const state = {
  sidebar: { // 侧边栏配置对象
    // 目标:
    // opened为true, 代表侧边栏打开
    // opened为false, 代表侧边栏关闭

    // 小目标: 默认字符串为'0'的时候是关闭状态, 如何把'0'转成flase的
    // 默认字符串'0' 代表侧边栏关闭
    // 1. 字符串'0'会被隐式转换为true, 数字0会被转换为false, 字符串''会被转换为false
    // 2. 把字符串0转成数字0: +'0' 结果 数字0
    // 3. 把数字0转成布尔类型: !0  结果 true
    // 4. 发现!+'0'结果竟然变成true, 意思'0'要关闭状态opened值应该为false, 所以再次取反
    // 最后!!+'0' 结果为 false

    // 小目标: 如果默认cookie里无值
    // Cookies.get('sidebarStatus') 结果为undefined
    // 1. undefined会被隐式转换为false, 默认上来是打开的(第一次进入项目登录后侧边栏是打开的)

    // 小目标: 默认字符串为'1'的时候侧边栏是开启状态, opened值应该为true
    // 默认字符串'1' 代表侧边栏打开
    // 字符串为'1'还是走?后面 那你直接写false就不对了

    // 学到了经验
    // 本地'0'和'1'分别要转成false和true, !!+就可以了
    // 默认有值无论'0'和'1'都走?后面
    // 默认无值直接走:后面, 默认让侧边栏打开
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false // 默认不使用动画, 不生效, 用动画

    // 为何不在浏览器直接存true和false
    // 原因: true和false存到浏览器里全变成字符串都为真了
  },
  device: 'desktop' // 设备标记
}

const mutations = { // 唯一能修改state里变量值的地方
  // 函数名: function() {}
  // 函数名() {} // 它还是function函数
  // 函数名: () => {}
  // 切换侧边栏状态
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened // 它只能影响vuex里变量值
    state.sidebar.withoutAnimation = false // 使用过渡动画

    // 本地存储的值也要同步
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1) // 1是打开, 0是关闭, 但是存入到本地变成字符串
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  // 关闭侧边栏(影响state值)
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation // 关闭时是否使用过渡动画
  },
  // 切换设备标记
  TOGGLE_DEVICE: (state, device) => {
    // 形参device值:
    state.device = device
  }
}

const actions = {
  // 切换侧边栏导航
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  // 关闭侧边栏
  // 原来写法
  // closeSideBar(store, val) {}
  // val =  { withoutAnimation: false }  val接收的传过来对象
  // 知识点: 形参对象的解构赋值
  // { withoutAnimation: withoutAnimation } = { withoutAnimation: false }
  // closeSideBar(store, { withoutAnimation }) {}
  // 总结: 接收实参里面withoutAnimation的值到此变量上
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true, // 开启命名空间: 避免污染, 影响state, mutations, getters, actions的使用
  state,
  mutations,
  actions
}
